<template>
  <el-form ref="form" :rules="rules" label-width="100px">
    <el-form-item label="步骤名称" prop="name">
      <el-input v-model="step.name" placeholder="步骤名称" style="width: 450px"></el-input>
    </el-form-item>
    <el-form-item label="数据源选择">
      <el-select v-model="step.connection" placeholder="数据源选择">
        <el-option v-for="source in dataSource.sourceList" :label="source.name" :value="source.id">
          <span style="float: left">{{ source.name }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ source.type }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="SQL script">
      <el-input type="textarea" v-model="step.sql" placeholder="请输入内容" :autosize="{minRows:5}"
                style="width: 450px"></el-input>
    </el-form-item>
    <el-row flex>
      <el-col :span="16">
        <el-button type="primary" @click="fetchFieldsFromInput">获取字段</el-button>
        <el-button icon="plus" @click="addCondition"></el-button>
        <br><br>
        <el-table :data="step.fields" stripe :max-height="200">
          <el-table-column type="index" :width="60"></el-table-column>
          <el-table-column label="字段名称" :width="180">
            <template scope="scope">
              <div v-if="!scope.row.edit">{{scope.row.name}}</div>
              <div v-else>
                <el-select v-model="scope.row.name" placeholder="字段名称">
                  <el-option v-for="item in step.availableFields" :value="item.name"></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="控制" :width="140">
            <template scope="scope">
              <el-row>
                <el-col :span="12">
                  <el-button size="small" type="info" @click="reverseEditState(scope.$index, scope.row)">编辑</el-button>
                </el-col>
                <el-col :span="12">
                  <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="6" :offset="2">
        <p>插入记录数字段:</p>
        <el-input v-model="step.insert_field"></el-input>
        <p>更新记录数字段:</p>
        <el-input v-model="step.update_field"></el-input>
        <p> 删除记录数字段:</p>
        <el-input v-model="step.delete_field"></el-input>
      </el-col>
    </el-row>
  </el-form>
</template>
<style lang="scss" scoped>
  .el-form-item {
    .el-select {
      .el-input {
        width: 450px;
      }
    }
  }
</style>
<script>
  import {Steps, Fields, DataSource} from "../../model/DataModel";
  import StepCommon from "./mixins/StepMixin";
  import HttpRequest from "../../model/HttpRequset";

  /**
   * SQL执行器，输出insert_field，update_field，delete_field
   * */
  export default{
    mixins: [StepCommon],
    data(){
      return {
        step: Steps.ExecSQL(),
        dataSource: DataSource(),
      }
    },
    mounted(){
      HttpRequest.requestSourceList().then((response) => {
        this.dataSource.sourceList = response.data.ds
      }).catch((response) => {
        this.$notify.error({title: '错误', message: "获取数据库列表失败", duration: 2000, offset: 200});
      });
    },
    methods: {
      addCondition(){
        this.step.fields.push(Fields.ExecSQL());
      },
      fetchFieldsFromInput(){
        this.step.fields = this.step.availableFields.map(el => ({edit: false, name: el.name}));
      },
      updateFields(){
        let out = [];
        if (this.step.insert_field && this.step.insert_field.trim() != "")
          out.push(this.step.insert_field);
        if (this.step.update_field && this.step.update_field.trim() != "")
          out.push(this.step.update_field);
        if (this.step.delete_field && this.step.delete_field.trim() != "")
          out.push(this.step.delete_field);
        this.step.outputFields = [];
      }
    }

  }
</script>
